<template>
  <div class="examPaperMain">
    <ul class="examListUl"
        v-if="paperList.length">
      <li @click.stop='naveToExam(item.id,item.name)'
          v-for="(item,index) in paperList"
          :key=index>
        <div class="liTop">
          <div class="leftHexagon">
            <img :src=imageList.border
                 alt="">
            <p class="examTitle">{{item.name}}</p>
          </div>
          <p class="play">
            <img :src=imageList.study
                 alt="">
          </p>
        </div>
        <div class="ctTime">
          {{item.add_time}}
        </div>
      </li>

    </ul>
    <div class="noData"
         v-if="noData">
      <img :src=noDataPng
           alt="">
    </div>
  </div>
</template>
<script>
import { formatTime } from '@/utils'
import { mapState, mapMutations } from 'vuex'
export default {
  data () {
    return {
      paperList: [],
      roomId: '',
      noDataPng: './../../static/images/noData.png',
      initId: '',
      noData: false,
      imageList: {
        border: './../../static/images/border.png',
        study: './../../static/images/study.png'
      }
    }
  },
  computed: {
    ...mapState({
      examPaper: state => state.examPaper

    })
  },
  methods: {
    ...mapMutations([
      'setExamPaper'
    ]),
    naveToExam (index, name) {
      // 模拟考试内容   请求不同的数据内容
      wx.navigateTo({
        url: '../simulationTest/main?type=' + 'random' + '&id=' + index + '&defaultItem=' + 0 + '&name=' + name
      })
      this.setExamPaper({
        paperName: name
      })
    },
    init (roomId) {
      let that = this
      that.paperList = []
      wx.showLoading({
        title: '加载中'
      })
      this.$http.get('https://dati.co-links.com/exam/index/', {
      }).then(function (res) {
        if (res.data.code === '0000') {
          if (res.data.data.length === 0) {
            that.noData = true
          }
          wx.hideLoading()
          that.initId = res.data.data[roomId || 0].id
          console.log(that.initId)
          for (var i = 0; i < res.data.data.length; i++) {
            if (res.data.data[i].id === that.initId) {
              console.log(res.data.data[i].papers)
              for (let k in res.data.data[i].papers) {
                that.paperList.push(res.data.data[i].papers[k])
              }
            }
          }
          for (let k in that.paperList) {
            that.paperList[k].add_time = formatTime(that.paperList[k].add_time)
          }
          console.log(that.paperList)
        }
      })
    }
  },
  mounted () {
    this.roomId = this.$mp.query.roomId
    this.init(this.roomId)
  }
}
</script>
<style lang="stylus">
.examPaperMain {
  padding: 0 32rpx;
  color: #000;
  font-size: 32rpx;
  line-height: 66rpx;
  height: 66rpx;
}

.examListUl {
  margin: 0 32rpx;
  height: 300rpx;

  li {
    padding-top: 8rpx;
    padding-bottom: 0;
    border-bottom: 2rpx solid #e6e6e6;

    .liHide:nth-child(1) {
      padding-top: 0;
    }
  }
}

.liTop {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  padding-bottom: 16rpx;

  .leftHexagon {
    width: 29rpx;
    height: 34rpx;
    position: relative;
    flex: 1;

    img {
      width: 29rpx;
      height: 34rpx;
      margin-top: 20rpx;
      position: absolute;
    }

    .examTitle {
      font-size: 30rpx;
      color: #000000;
      padding-left: 56rpx;
      display: inline-block;
    }
  }
}

.play {
  width: 45rpx;
  height: 45rpx;
  float: right;

  img {
    width: 45rpx;
    height: 45rpx;
    margin-top: 30rpx;
  }
}

.ctTime {
  padding-bottom: 17rpx;
  border-left: 0;
  margin-left: 14rpx;
  padding-left: 54rpx;
}

.liHide {
  font-size: 26rpx;
  color: #333333;
  position: relative;
  // margin-top 8rpx
  padding: 18rpx 0;
  padding-left: 60rpx;
  height: 32rpx;

  &:before {
    position: absolute;
    content: '';
    left: 8rpx;
    top: 50%;
    width: 16rpx;
    height: 16rpx;
    border-radius: 16rpx;
    background: #00cc76;
    z-index: 2;
  }

  &:after {
    position: absolute;
    content: '';
    left: 14rpx;
    top: calc(50% + 20rpx);
    width: 2rpx;
    height: 36rpx;
    background: #00cc76;
    z-index: 1;
  }
}
</style>
